/*
 * @Description: 修改弹窗
 * @Author: Zzt
 * @Date: 2022-11-07 20:15:43
 * @LastEditTime: 2022-11-08 11:24:35
 */

import { Button, Form, Modal } from 'antd';
import { useEffect } from 'react';
import { useReportTemplateContext } from '../../contexts/ReportTemplateContext';
import ReportTempForm, { IReportTempForm } from './common/ReportTempForm';
import { IAddReportTempParams } from '@/api/report';

const EditReport = (props: any) => {
  const { visible, onClose, data } = props;
  const { editReportTempFunc } = useReportTemplateContext();
  const [form] = Form.useForm();

  useEffect(() => {
    data.type = parseInt(data.type, 10);
    form.setFieldsValue(data);
  }, [visible]);

  const saveAndDesign = () => {
    form.submit();
  };

  const onFinish = (values: IReportTempForm) => {
    editReportTempFunc({ ...data, ...values }).then(() => {
      onClose();
    });
  };

  return (
    <Modal
      visible={visible}
      onCancel={onClose}
      title="修改"
      footer={[
        <Button onClick={onClose} key="cancel">
          取消
        </Button>,
        <Button onClick={saveAndDesign} key="saveAndDesign" type="primary">
          保存并设计模板
        </Button>,
        <Button onClick={() => form.submit()} key="save" type="primary">
          保存
        </Button>
      ]}
    >
      <Form
        form={form}
        onFinish={onFinish}
        labelCol={{ span: 4 }}
        wrapperCol={{ span: 20 }}
        labelAlign={'left'}
      >
        <ReportTempForm visible={visible} />
      </Form>
    </Modal>
  );
};
export default EditReport;
